<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <title>动态添加下拉框</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var CarTypeSelect = $(".CarType").children("select");
            var CarColorSelect = $(".CarColor").children("select");
            var CarWheelSelect = $(".CarWheel").children("select");
            //给第一个下拉框的SelectChanged时间编码 
            CarTypeSelect.change(function() {

                //取得当前下拉框的值 
                var CarTypeValue = $(this).val();
                //当第一个下拉框内容改变的时候，第三个下拉框要隐藏起来 
                CarWheelSelect.parent().hide();
                if (CarTypeValue != "") {
                    CarColorSelect.html("");
                    $("<option value = ''>请选择</option>").appendTo(CarColorSelect);
                    switch (CarTypeValue) {
                        case "宝马":
                            var CarColor = ["绿色", "黑色"];
                            for (var i = 0; i < CarColor.length; i++) {
                                $("<option value='" + CarColor[i] + "'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);
                            }
                            break;
                        case "奔驰":
                            var CarColor = ["白色", "红色"];
                            for (var i = 0; i < CarColor.length; i++) {
                                $("<option value='" + CarColor[i] + "'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);
                            }
                            break;
                        case "保时捷":
                            var CarColor = ["黄色", "黑色", "绿色"];
                            for (var i = 0; i < CarColor.length; i++) {
                                $("<option value='" + CarColor[i] + "'>" + CarColor[i] + "</option>").appendTo(CarColorSelect);
                            }
                            break;
                    }
                    CarColorSelect.parent().show();
                } else {
                    CarColorSelect.parent().hide();
                }
            });

            CarColorSelect.change(function() {

                var CarColorValue = $(this).val();
                CarWheelSelect.html("");
                if (CarColorValue != "") {
                    CarWheelSelect.html("");
                    $("<option value = ''>请选择</option>").appendTo(CarWheelSelect);
                    switch (CarColorValue) {

                        case "绿色":
                            var CarWheel = ["绿钢", "绿碳纤维"];
                            for (var i = 0; i < CarWheel.length; i++) {
                                $("<option value='" + CarWheel[i] + "'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);
                            }
                            break;
                        case "红色":
                            var CarWheel = ["红钢", "红碳纤维"];
                            for (var i = 0; i < CarWheel.length; i++) {
                                $("<option value='" + CarWheel[i] + "'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);
                            }
                            break;
                        case "黑色":
                            var CarWheel = ["黑钢", "黑碳纤维"];
                            for (var i = 0; i < CarWheel.length; i++) {
                                $("<option value='" + CarWheel[i] + "'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);
                            }
                            break;
                        case "白色":
                            var CarWheel = ["白钢", "白碳纤维"];
                            for (var i = 0; i < CarWheel.length; i++) {
                                $("<option vaiue='" + CarWheel[i] + "'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);
                            }
                            break;
                        case "黄色":
                            var CarWheel = ["白", "白碳"];
                            for (var i = 0; i < CarWheel.length; i++) {
                                $("<option vaiue='" + CarWheel[i] + "'>" + CarWheel[i] + "</option>").appendTo(CarWheelSelect);
                            }
                            break;
                    }
                    CarWheelSelect.parent().show();
                } else {
                    CarWheelSelect.parent().hide();
                }
            });
        });
    </script>
</head>

<body>
    <form action="#">
        <br/>
        <br/>
        <br/>
        <div class="CarInfo">

            <span class="CarType">车类型： 
<select>
    <option value="请选择" selected="selected">请选择</option>
    <option value="宝马">宝马</option>
    <option value="奔驰">奔驰</option>
    <option value="保时捷">保时捷</option>
</select>
</span>

            <span class="CarColor" style="display:none">车颜色： 
<select>
</select> 
</span>

            <span class="CarWheel" style="display:none">车轮： 
<select>
</select> 
</span>
        </div>
    </form>
</body>

</html>